<template>
  <view class="tabList">
    <view
      v-for="(item, index) in menuList"
      :key="index"
      class="tab"
    >
      <img
        v-if="currentCate === item.id"
        class="tabBottom"
        referrerpolicy="no-referrer"
        :src="require('@/static/public/tabBottom.png')"
      >
      <view
        :class="currentCate === item.id ? 'item active' : 'item'"
        @click="changeTab(item)"
      >
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    categoryList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultTab: {
      type: String,
      default: '推荐'
    }
  },
  data() {
    return {
      menuList: this.categoryList,
      currentCate: 0
    };
  },
  watch: {
    categoryList: function(val, oldVal) {
      if(val) {
        this.menuList = [{id: 0, name: this.defaultTab}].concat(val);
      }
    }
  },
  methods: {
    changeTab(item) {
      if(item.id === this.currentCate) return;
      this.currentCate = item.id;
      this.$emit('change', item);
    }
  }
};
</script>

<style lang="less" scoped>
.tabList {
  display: flex;
  align-items: flex-end;
  margin: 40rpx 20rpx 20rpx 0;
  padding: 0 20rpx;
  padding-bottom: 10rpx;
  overflow-x: auto;
  white-space: nowrap;
  height: 57rpx;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
  .tab {
    margin-right: 30upx;
    position: relative;
    display: inline-block;
    .item {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 40rpx;
    }
    .active {
      font-size: 40rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 56rpx;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%);
        width: 108rpx;
        height: 30rpx;
      }
    }
    .tabBottom {
      position: absolute;
      width: 108rpx;
      height: 20rpx;
      bottom: -5rpx;
      left: 50%;
      transform: translate(-50%);
    }
  }
}
</style>
